<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const list = ref([])
const showingList = ref([])
const editingId = ref(-1)
const editingValue = ref('')

function onAdd () {
  list.value.push({
    id: Date.now(),
    value: inputValue.value
  })
  showingList.value = list.value.concat()
}

function onDelete (id) {
  list.value = list.value.filter(item => item.id !== id)
  showingList.value = list.value.concat()
}

function onSearch () {
  showingList.value = list.value.filter(item => item.value.includes(inputValue.value))
}

function onEdit (item) {
  editingId.value = item.id;
  editingValue.value = item.value
}

function onEditOk (id) {
  list.value = list.value.map(item => {
    if (id === item.id) {
      return {
        id,
        value: editingValue.value
      }
    }
    return item
  })
  showingList.value = list.value.concat()
  editingId.value = -1
}

</script>

<template>
  <div>
    <a-input size="" type="text" v-model:value="inputValue" />
    <a-button type="primary" @click="onAdd">新增</a-button>
    <a-button @click="onSearch">查询</a-button>
    <ul>
      <li
        v-for="item in showingList"
        :key="item.id"
      >
        <span v-if="editingId !== item.id">{{ item.value }}</span>
        <input v-else type="text" v-model="editingValue">

        <button
          v-if="editingId !== item.id"
          @click="onEdit(item)"
        >
          修改
        </button>
        <button
          v-else
          @click="onEditOk(item.id)"
        >
          确认
        </button>


        <button @click="onDelete(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>
